<!-- 设备协议 -->
<template>
  <a-spin :spinning="tableLoad" size="large">
    <a-form>
      <a-form-item label="当前设备:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 10  ,xs: 24 }">
        {{equipmentDetailData.name}}
      </a-form-item>
      <a-divider></a-divider>
      <a-form-item required label="设备MAC地址:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 10 ,xs: 24 }">
        <a-select v-model="formItem.equipment_code" placeholder="请选择MAC地址">
          <a-select-option v-for="item in deviceCodeData" :value="item.id" :key="item.id">{{item.code}}</a-select-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item required label="通讯密码:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 10,xs: 24 }">
        <a-input :type="inputType" v-model="formItem.password" placeholder="请输入通讯密码">
          <a-icon slot="suffix" :type="inputType ==='password' ? 'eye' : 'eye-invisible'" @click="wordShow" />
        </a-input>
      </a-form-item> -->
      <!-- <a-form-item required label="通讯协议:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 10,xs: 24 }">
        <a-select allowClear v-model="formItem.agreements" placeholder="请选择通讯协议">
          <a-select-option v-for="item in ProtocolData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item> -->
      <a-form-item required label="设备类型:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 10,xs: 24 }">
        <!-- <a-select v-model="formItem.type" placeholder="请选择设备类型">
          <a-select-option v-for="item in deviceTypeData" :value="item.id" :key="item.id">{{item.type_name}}</a-select-option>
        </a-select> -->
        <a-select allowClear v-model="formItem.type" placeholder="请选择设备类型">
          <a-select-option :value="1">台达PCL</a-select-option>
          <a-select-option :value="2">西门子PCL</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item required label="采集频率:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 10,xs: 24 }">
        <a-select allowClear v-model="formItem.acquisition_frequency" placeholder="请选择采集频率">
          <a-select-option :value="1">1分钟</a-select-option>
          <a-select-option :value="2">3分钟</a-select-option>
          <a-select-option :value="3">5分钟</a-select-option>
          <a-select-option :value="4">10分钟</a-select-option>
          <a-select-option :value="5">30分钟</a-select-option>
          <a-select-option :value="6">1小时</a-select-option>
          <a-select-option :value="7">5小时</a-select-option>
          <a-select-option :value="8">1天</a-select-option>
          <a-select-option :value="9">5天</a-select-option>
          <a-select-option :value="10">不采集（设备主动上报）</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item required label="安装地图：" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 16,xs: 24 }">
        <div style="width: 100%;border: 1px solid #ccc;">
          <baidu-map :scroll-wheel-zoom="true" @click="getPoint" center="中华人民共和国">
            <bm-view class="map"></bm-view>
            <bm-local-search :panel="false" :selectFirstResult="true" @searchcomplete="searchMain" :keyword="formItem.address" :auto-viewport="true"></bm-local-search>
          </baidu-map>
          <div style="padding: 10px;box-sizing: border-box;">
            <a-col :md="24" :xs="24" style="color: red;">注：输入设备地址后默认使用地点A为设备经纬度，点击地图可自由选择地点</a-col>
            <a-row>
              <a-col :md="4" :xs="24"><i class="requiredIcom">*</i>设备地址：</a-col>
              <a-col :md="19" :xs="24">
                <a-input style="width: 100%;" v-model="formItem.address" placeholder="请输入设备详细地址" />
              </a-col>
              <a-col :md="24" :xs="24">
                经度：{{formItem.longitude}}
                &nbsp;&nbsp;&nbsp;&nbsp;
                纬度：{{formItem.latitude}}
              </a-col>
            </a-row>
          </div>
        </div>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 16, offset: 6  }">
        <a-button style="width: 120px;" type="primary" html-type="submit" :loading="confirmLoading" @click="addBtn">下一步</a-button>
        <!-- <a-button type="danger" style="width: 120px;" @click="returnBtn">返回协议列表</a-button> -->
      </a-form-item>
    </a-form>
  </a-spin>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex';
  export default {
    name: "Protocol",
    data() {
      return {
        /* 地图 */
        /* 地图end */

        /* 通用 */
        confirmLoading: false, //按钮loading状态
        tableLoad: false, //页面loading状态
        /* 通用end */

        /* 密码框 */
        inputType: 'password',
        isAdd: true,
        isAddType: false,
        formItem: {
          equipment_id: undefined, // 设备ID
          equipment_code: undefined, // 设备编号
          // password: '', // 通讯密码
          agreements: undefined, // 通讯协议
          type: undefined, // 设备类型
          acquisition_frequency: undefined, // 采集频率
          address: '', // 设备地址
          longitude: '', // 经度
          latitude: '', // 纬度
        },
      }
    },
    computed: {
      ...mapState({
        requestCode: state => state.equipProtocol.requestCode,
        itemDetail: state => state.equipProtocol.itemDetail,    //设备协议详情
        equipmentDetailData: state => state.equipment.itemDetail, //设备详情信息
        ProtocolData: state => state.equipmentProtocol.ProtocolData, // 设备通信协议
        deviceCodeData: state => state.equipmentCode.deviceCodeData, // 设备未使用编号信息
        deviceTypeData: state => state.equipDeviceType.deviceTypeData, // 设备类型信息
        
      }),
    },
    watch: {
      'formItem.address'() {
        if (this.formItem.address == '') {
          this.formItem.longitude = '' // 经度
          this.formItem.latitude = '' // 纬度
        }
      },
			equipmentDetailData(newValue, oldValue) {
        console.log('设备详情change'); 
        console.log(this.equipmentDetailData);
      },
      itemDetail(newValue, oldValue) {
        console.log('设备协议详情change'); 
        // console.log(this.itemDetail);
        this.formItem = {
          id: this.itemDetail.id,
          equipment_id: Number(this.itemDetail.equipment_id), // 设备ID
          equipment_code: Number(this.itemDetail.equipment_code), // 设备编号
          // password: this.itemDetail.password, // 通讯密码
          agreements: Number(this.itemDetail.agreements), // 通讯协议
          type: Number(this.itemDetail.type), // 设备类型
          acquisition_frequency: Number(this.itemDetail.acquisition_frequency), // 采集频率
          address: this.itemDetail.address, // 设备地址
          longitude: this.itemDetail.longitude, // 经度
          latitude: this.itemDetail.latitude, // 纬度
        }
      },
		},
    mounted() {
      this.tableLoad = true
      const equipment_id = this.$route.query.equipment_id;
      console.log(equipment_id);
      if(equipment_id != undefined){
        this.equipmentDetail(equipment_id)
        this.formItem = {
          equipment_id: Number(equipment_id), // 设备ID
          equipment_code: undefined, // 设备编号
          // password: '', // 通讯密码
          agreements: undefined, // 通讯协议
          type: undefined, // 设备类型
          acquisition_frequency: undefined, // 采集频率
          address: '', // 设备地址
          longitude: '', // 经度
          latitude: '', // 纬度
        }
      }
      if (this.$route.query.edit) {
        // this.protocolAll(equipment_id)       // 隐藏通讯协议
        this.changeData(equipment_id)           // 编辑获取数据
      } else {
        this.deviceCodeAll()
        // this.protocolAll()                   //隐藏通讯协议
      }
      setTimeout(() => {
        this.tableLoad = false
      }, 1000);
    },
    methods: {
      /* 密码显示隐藏 */
      wordShow() {
        this.inputType === 'password' ? this.inputType = 'text' : this.inputType = 'password'
      },
      ...mapActions({
        dataAdd: 'equipProtocol/dataAdd', //添加
        dataEdit: 'equipProtocol/dataEdit', //编辑
        dataDetail: 'equipProtocol/dataDetail', //id查设备协议详情

        equipmentDetail: 'equipment/dataDetail', //设备基础信息详情
        deviceCodeAll: 'equipmentCode/deviceCodeAll', // 设备未使用编号信息
        protocolAll: 'equipmentProtocol/protocolAll', // 设备通信协议
        
      }),

      /* 通用模块 */
      // 编辑获取数据
      changeData(equipment_id) {
        this.tableLoad = true
        this.dataDetail(equipment_id);
        setTimeout(() => {
          console.log(this.itemDetail);
          if(this.itemDetail != null) {
            this.deviceCodeAll(equipment_id)
          } else {
            this.deviceCodeAll(equipment_id)
            this.$notification.warning({
              message: '该设备未绑定设备协议',
            });
            this.formItem = {
              equipment_id: Number(equipment_id),
              longitude: '',
              latitude: '',
            }
          }
          console.log(this.formItem);
          this.tableLoad = false
        }, 1000);
      },
      /* 通用模块end */

      /* 地图 */
      getPoint(e) {
        console.log(e);
        const that = this
        this.$confirm({
          title: `是否使用点击的地点作为设备地址?`,
          // content: `!`,
          okText: '确定',
          // okType: 'danger',
          cancelText: '取消',
          onOk() {
            that.formItem.longitude = e.point.lng // 经度
            that.formItem.latitude = e.point.lat // 纬度
          },
        });
        
      },
      searchMain(e) {
        console.log(e);
        if (e!=undefined && typeof e.Br != 'undefined') {
          this.formItem.longitude = e.Br[0].point.lng // 经度
          this.formItem.latitude = e.Br[0].point.lat // 纬度
        }
      },
      /* 地图end */

      // 提交
      addBtn() {
        this.confirmLoading = true;
        console.log(this.formItem);
          console.log(this.itemDetail);
        if (this.$route.query.edit) {
          console.log('编辑');
          if(this.itemDetail == null){
            // console.log("未绑定协议信息的设备走添加接口");
            this.dataAdd(this.formItem) //添加  
          } else {
            // 已经绑定过的走编辑接口
            this.dataEdit(this.formItem); //编辑
          }
        } else {
          this.dataAdd(this.formItem) //添加
        }
        setTimeout(() => {
          this.confirmLoading = false;
        }, 1000);
      },
      //返回
      returnBtn() {
        const that = this
        this.$confirm({
          title: `您确定要返回上一页吗?`,
          content: `返回上一页将不保留当前输入数据!`,
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            that.$router.push('/equipment/ProtocolList')
          },
        });
      },
    }
  }
</script>

<style scoped>
  .map {
    width: 100%;
    height: 350px;
  }

  .requiredIcom {
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-style: normal;
    font-size: 14px;
    color: #f5222d;
  }
</style>
